<template>
	<div>
		<el-button @click="dialogFormVisible = true">打开地图</el-button>
		<el-dialog title="选择地址" :visible.sync="dialogFormVisible"  width="850px">
			  <mapselect :mapcenter="centerLatLng" :oldmarker="oldMarker" @mapclick="pointChange"></mapselect>
			<div slot="footer" class="dialog-footer" style="text-align: center;">
				<el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
				<el-button @click="dialogFormVisible = false">关闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=KT5BZ-OFCAO-U4ZW5-SKHQ3-4NHX5-5FFUE"></script>
<script>
	import selectPoint from '@/components/selectPoint';
	export default {
		name: "selectAddress",
		components: {
            mapselect: selectPoint
        },
		data() {
			return {
				dialogFormVisible: false,
				pointName: '北京',
                qqmap: null,
                centerLatLng: '39.906403157526704,116.39842987060547',
                oldMarker: '',
                newMarker: null
			}
		},
		methods: {
			pointChange(ev){
				this.$emit('choiceaddress', ev);
            }
		}
	}
</script>

<style scoped lang="scss">
	@import '~scss_vars';
	.data_box{
		margin: 10px;
		max-height: 360px;
		overflow-x: hidden;
		overflow-y: auto;
	}
	 .qqmap { width: 700px;
        height: 600px;
    }
</style>
